<template>
    <div class="login">
        <div class="login-box">
            <el-tabs v-model="activeName" >
                <el-tab-pane  name="pass">
                    <span slot="label"><i class="el-icon-lock"></i> 手机号登录</span>
                    <UserLogin/>
                </el-tab-pane>
                <el-tab-pane  name="code">
                     <span slot="label"><i class="el-icon-mobile-phone"></i> 新用户注册</span>
                   <UserRegister/>
                    </el-tab-pane>
            </el-tabs>
        </div>

    
    </div>
    
</template> 
<script>
import UserLogin from "@/components/login.vue"
import UserRegister from "@/components/register.vue"

export default {
    components:{
          UserLogin,
          UserRegister

    },
  data(){
      return{
          activeName:"pass",
          
      }
  },
  methods:{
     

  },
 mounted(){
    //  getcsrftoken()  //获取验证码操作，这里我不需要
    //  .then(res=>{

    //  })
 }

};
</script>
<style lang="scss" scoped>
::v-deep .el-tabs__nav{
    width:100%;
    display:flex;
}
::v-deep .el-tabs__item{
    flex:1;
    text-align:center;
}
.login {
  width: 100%;
  height: 100%;
  background-image: url("./../assets/images/timg.jpg");
  background-size: 120% 100%;
  background-repeat: no-repeat;
  background-position: 0 0;
  overflow: hidden;
  position: relative;
}
.login-box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 420px;
  height: 400px;
  background:white;
  border-radius: 10px;
  box-shadow: 1px 2px 3px 4px white;
  animation: zoomInDown 0.8s;
}
</style>